<script setup lang="ts">
import { getResearchDetail } from "@/api/other/researchTeam";
import { addDialog } from "@/components/ReDialog";
import { useRouterNavigation } from "@/router/utils";
import arrowLeft from "@iconify-icons/ep/arrow-left";
import dayjs from "dayjs";
import { h, onMounted, ref, watch } from "vue";
import { useRoute } from "vue-router";
import ShowAchiev from "../components/ShowAchiev.vue";
import ShowUser from "../detail/showUser.vue";
const { go } = useRouterNavigation();
// 传值
const props = defineProps({
  dataId: {
    type: Number,
    default: null
  },
  // 是否审核页面
  isApproval: {
    type: Boolean,
    default: false
  }
});

// 页面加载
const collapseAct = ref("");
const teamForm = ref<any>({
  total: {}
});
const loading = ref(false);
const loadDetail = async dataId => {
  if (!dataId) {
    return;
  }
  loading.value = true;

  let { data } = await getResearchDetail({ id: dataId });

  // 人员构成统计
  let totalForm = {
    zrs: 0,
    xnry: 0,
    xwry: 0,
    age1: 0,
    age2: 0,
    age3: 0,
    bsxl: 0,
    ssxl: 0,
    qtxl: 0,
    zgzc: 0,
    fgzc: 0,
    qtzc: 0
  };

  // 用户列表
  let allUserList = [];
  if (data.masterUser) allUserList.push(data.masterUser);
  if (data.secretaryUser) allUserList.push(data.secretaryUser);
  if (data.userList && data.userList.length > 0) {
    allUserList = allUserList.concat(data.userList);
  }
  console.log("allUserList", allUserList);
  if (allUserList.length > 0) {
    totalForm.zrs = allUserList.length;
    allUserList.forEach(v => {
      // bizType 人员构成 1校内人员 2校外人员
      if (v.bizType == 1) totalForm.xnry++;
      if (v.bizType == 2) totalForm.xwry++;
      if (v.age) {
        if (v.age < 35) {
          totalForm.age3++;
        } else if (v.age >= 35 && v.age <= 45) {
          totalForm.age2++;
        } else {
          totalForm.age1++;
        }
      }
      if (v.background) {
        if (v.background == "博士") totalForm.bsxl++;
        if (v.background == "硕士") totalForm.ssxl++;
        if (v.background == "其他") totalForm.qtxl++;
      }
      if (v.titleNameList && v.titleNameList.length > 0) {
        console.log("11", v.titleNameList.indexOf("正高级工程师"));
        if (
          v.titleNameList.indexOf("正高级工程师") != -1 ||
          v.titleNameList.indexOf("正高级实验师") != -1
        )
          totalForm.zgzc++;
        if (
          v.titleNameList.indexOf("副教授") != -1 ||
          v.titleNameList.indexOf("副研究员") != -1
        )
          totalForm.fgzc++;
        if (v.titleNameList.indexOf("其他") != -1) totalForm.qtzc++;
      }
    });
  }
  data.total = totalForm;

  teamForm.value = data;
  setTimeout(() => {
    loading.value = false;
  }, 200);
};

onMounted(async () => {
  const { query } = useRoute();
  let dataId = props.dataId || query.id;
  loadDetail(dataId);
});

watch(
  () => props.dataId,
  async newValue => {
    if (!newValue) {
      return;
    }
    loadDetail(newValue);
  },
  { immediate: true }
);

// 查看用户信息
function openUserDetail(userData) {
  addDialog({
    title: "用户信息",
    props: {
      userId: userData.id,
      age: userData.age
    },
    width: "500px",
    draggable: true,
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(ShowUser),
    beforeSure: done => {
      done();
    }
  });
}

defineOptions({
  name: "TeamResearchDetail"
});
</script>

<template>
  <div v-loading="loading" class="team-detail approval">
    <el-card class="left" shadow="always">
      <div v-if="!isApproval" class="flex items-center mb-3">
        <div>
          <IconifyIconOffline
            :icon="arrowLeft"
            class="mr-2 text-lg cursor-pointer !text-black"
            @click.stop="go(-1)"
          />
        </div>
        <img
          class="mr-2"
          width="30"
          height="30"
          src="@/assets/other/team.png"
          alt=""
        />
        <h4 class="mr-2">
          {{ teamForm.teamName || "--" }}
        </h4>
        <div>
          <el-tag
            v-if="teamForm.examineStatus === 0"
            type="warning"
            size="small"
            >审核中</el-tag
          >
          <el-tag
            v-else-if="teamForm.examineStatus === 1"
            type="primary"
            size="small"
            >已审核</el-tag
          >
          <el-tag v-else type="danger" size="small">已驳回</el-tag>
        </div>
      </div>
      <el-form ref="formRef" label-width="110px" class="team-form">
        <div class="flex">
          <el-form-item label="依托单位" class="flex-1">
            <div>{{ teamForm.relyOnUnit || "--" }}</div>
          </el-form-item>
          <el-form-item label="申报日期" class="flex-1">
            <div>
              {{
                teamForm.decDate
                  ? dayjs(teamForm.decDate).format("YYYY年MM月DD日")
                  : "--"
              }}
            </div>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="负责人" class="flex-1">
            <el-tag
              v-if="teamForm.masterUser"
              type="primary"
              size="small"
              class="cursor-pointer"
              @click="openUserDetail(teamForm.masterUser)"
              >{{ teamForm.masterUser?.name || "--" }}</el-tag
            >
            <div v-else>{{ teamForm.masterUser?.name || "--" }}</div>
          </el-form-item>
          <el-form-item label="联系方式" class="flex-1">
            <div>{{ teamForm.masterUser?.phone || "--" }}</div>
          </el-form-item>
        </div>
        <div class="flex">
          <el-form-item label="团队秘书" class="flex-1">
            <el-tag
              v-if="teamForm.secretaryUser"
              type="primary"
              size="small"
              class="cursor-pointer"
              @click="openUserDetail(teamForm.secretaryUser)"
              >{{ teamForm.secretaryUser?.name || "--" }}</el-tag
            >
            <div v-else>{{ teamForm.secretaryUser?.name || "--" }}</div>
          </el-form-item>
          <el-form-item label="联系方式" class="flex-1">
            <div>{{ teamForm.secretaryUser?.phone || "--" }}</div>
          </el-form-item>
        </div>
        <el-form-item label="团队人员" class="flex-1">
          <div v-if="teamForm.userList">
            <el-tag
              v-for="user in teamForm.userList"
              :key="user.id"
              type="primary"
              size="small"
              class="mr-2 cursor-pointer"
              @click="openUserDetail(user)"
              >{{ user.name }}</el-tag
            >
            <div v-if="teamForm.userList.length == 0">--</div>
          </div>
        </el-form-item>
        <el-form-item label="人员构成" class="!mb-3">
          <div class="staff-sum">
            <!-- 人员数量 -->
            <div class="sum-box">
              <div class="cell title">
                <div>人员</div>
                <div>数量</div>
              </div>
              <div class="cell">
                <div class="top">{{ teamForm.total.zrs || 0 }}</div>
                <div>总人数</div>
              </div>
              <div class="cell">
                <div class="top">{{ teamForm.total.xnry || 0 }}</div>
                <div>校内人员</div>
              </div>
              <div class="cell">
                <div class="top">{{ teamForm.total.xwry || 0 }}</div>
                <div>校外人员</div>
              </div>
            </div>
            <!-- 年龄结构 -->
            <div class="sum-box">
              <div class="cell title">
                <div>年龄</div>
                <div>结构</div>
              </div>
              <div class="cell">
                <div class="top">{{ teamForm.total.age1 || 0 }}</div>
                <div>45周岁以上</div>
              </div>
              <div class="cell">
                <div class="top">{{ teamForm.total.age2 || 0 }}</div>
                <div>35~45周岁</div>
              </div>
              <div class="cell">
                <div class="top">{{ teamForm.total.age3 || 0 }}</div>
                <div>35周岁以下</div>
              </div>
            </div>
            <!-- 学历结构 -->
            <div class="sum-box">
              <div class="cell title">
                <div>学历</div>
                <div>结构</div>
              </div>
              <div class="cell">
                <div class="top">{{ teamForm.total.bsxl || 0 }}</div>
                <div>博士</div>
              </div>
              <div class="cell">
                <div class="top">{{ teamForm.total.ssxl || 0 }}</div>
                <div>硕士</div>
              </div>
              <div class="cell">
                <div class="top">{{ teamForm.total.qtxl || 0 }}</div>
                <div>其他</div>
              </div>
            </div>
            <!-- 职称结构 -->
            <div class="sum-box">
              <div class="cell title">
                <div>职称</div>
                <div>结构</div>
              </div>
              <div class="cell">
                <div class="top">{{ teamForm.total.zgzc || 0 }}</div>
                <div>正高</div>
              </div>
              <div class="cell">
                <div class="top">{{ teamForm.total.fgzc || 0 }}</div>
                <div>副高</div>
              </div>
              <div class="cell">
                <div class="top">{{ teamForm.total.qtzc || 0 }}</div>
                <div>其他</div>
              </div>
            </div>
          </div>
        </el-form-item>

        <el-form-item v-if="teamForm.examineStatus == 2" label="驳回原因">
          <div>{{ teamForm.examineDesc || "--" }}</div>
        </el-form-item>
        <div class="ml-10">
          <el-collapse v-model="collapseAct">
            <el-collapse-item title="点击展开详情" name="1">
              <template #title>
                <div class="text-sm text-orange-400">点击展开详情</div>
              </template>
              <el-form-item label="团队基本情况">
                <div class="min-h-[100px]">{{ teamForm.baseInfo || "--" }}</div>
              </el-form-item>
              <el-form-item label="团队带头人简介">
                <div class="min-h-[100px]">
                  {{ teamForm.masterInfo || "--" }}
                </div>
              </el-form-item>
              <el-form-item label="团队工作计划与预期成果" class="text-right">
                <div class="min-h-[100px]">
                  {{ teamForm.resultInfo || "--" }}
                </div>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-form>
    </el-card>

    <!-- 科研成果 -->
    <el-card
      class="right"
      shadow="always"
      body-style="height: 100%;display: flex;flex-direction: column;"
    >
      <ShowAchiev :moduleData="teamForm" />
    </el-card>
  </div>
</template>
<style lang="scss" scoped>
:deep(.el-card__body) {
  padding: 15px;
}
:deep(.tabs .el-tabs__item) {
  padding: 0 12px !important;
}
.el-form-item {
  margin-bottom: 5px;
}
.project-form .el-form-item {
  margin-bottom: -5px;
}
.card-title {
  font-weight: bold;
  margin-bottom: 5px;
}
:deep(.team-form .el-form-item__content) {
  font-weight: bold;
}
:deep(.project-form .el-form-item) {
  font-weight: bold;
}
.team-detail {
  min-width: 1000px;
  display: flex;
  height: calc(100% - 32px);
  box-shadow: none !important;
  .left {
    flex: 5;
    margin-right: 15px;
  }
  .right {
    flex: 5;
    min-width: 500px;
    min-height: calc(100vh - 114px);
  }
}
.team-detail.approval {
  min-width: auto;
  display: block;
  height: auto;
  .left {
    margin: 0 0 12px;
  }
  .right {
    flex: 4;
    height: auto;
  }
}
.staff-sum {
  width: 100%;
  border-right: 1px solid #c0ebff;
  border-bottom: 1px solid #c0ebff;
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  .sum-box {
    width: 50%;
    line-height: 20px;
    border-left: 1px solid #c0ebff;
    border-top: 1px solid #c0ebff;
    display: flex;
    align-items: center;
    padding: 6px 0;
    .cell {
      flex: 1;
      text-align: center;
      &.title {
        width: 55px;
        flex: none;
      }
      .top {
        color: #00a6f3;
      }
    }
  }
}
.project-box {
  flex: 1;
  overflow: auto;
  .project {
    border: 1px solid #c0ebff;
    padding: 12px;
    border-radius: 8px;
    position: relative;
    margin-bottom: 12px;
  }
  .type-name {
    font-size: 13px;
    color: #00618d;
    font-weight: bold;
    position: absolute;
    right: 0;
    top: 10px;
    background-color: #c0ebff;
    padding: 5px 10px;
    border-radius: 15px 0 0 15px;
  }
}
</style>
